<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浏览器控制台调试工具</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            color: #333;
        }
        .section {
            margin: 20px 0;
            padding: 15px;
            background: #f5f5f5;
            border-radius: 8px;
        }
        button {
            padding: 10px 15px;
            background: #1976d2;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background: #1565c0;
        }
        pre {
            background: #2d2d2d;
            color: #f8f8f2;
            padding: 15px;
            border-radius: 4px;
            overflow-x: auto;
            max-height: 400px;
        }
        .instructions {
            background: #fff3cd;
            color: #856404;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        .warning {
            color: #ff9800;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>浏览器控制台调试工具</h1>
    
    <div class="instructions">
        <p><strong>重要提示：</strong>请按F12打开浏览器开发者工具，然后查看控制台(Console)标签页。点击下方按钮后，控制台将显示详细的调试信息。</p>
    </div>
    
    <div class="section">
        <h2>调试操作</h2>
        <button onclick="testFilteredOrders()">测试filteredOrders数据</button>
        <button onclick="testDataBinding()">测试数据绑定</button>
        <button onclick="testVueTemplateRendering()">测试Vue模板渲染</button>
        <button onclick="inspectVueInstance()">检查Vue实例</button>
    </div>
    
    <div class="section">
        <h2>调试结果</h2>
        <pre id="debugResult">点击上方按钮开始调试...</pre>
    </div>
    
    <div class="section">
        <h2>调试说明</h2>
        <p>这个工具将帮助您分析订单页面中数据不显示的问题。请按照以下步骤操作：</p>
        <ol>
            <li>首先，确保您已经打开了订单页面 (http://localhost:5174/orders)</li>
            <li>按F12打开浏览器开发者工具，并切换到Console标签页</li>
            <li>点击上方的调试按钮，查看控制台输出</li>
            <li>分析控制台中的详细信息，特别是关于filteredOrders数组的内容</li>
        </ol>
        <p class="warning">注意：如果控制台中出现任何错误信息，请记录下来并用于进一步排查问题。</p>
    </div>
    
    <script>
        // 记录调试结果
        function logResult(message) {
            console.log(message);
            document.getElementById('debugResult').textContent = message;
        }
        
        // 测试filteredOrders数据
        function testFilteredOrders() {
            console.log('===== 测试filteredOrders数据开始 =====');
            
            // 尝试找到订单页面的Vue实例
            const orderPage = findOrderPageVueInstance();
            
            if (orderPage) {
                console.log('找到订单页面Vue实例:', orderPage);
                
                // 检查orders和filteredOrders属性
                console.log('orders数组长度:', orderPage.orders ? orderPage.orders.length : '未定义');
                console.log('filteredOrders数组长度:', orderPage.filteredOrders ? orderPage.filteredOrders.length : '未定义');
                
                // 如果有数据，显示前两个订单样本
                if (orderPage.orders && orderPage.orders.length > 0) {
                    console.log('orders数组前两个元素:', JSON.stringify(orderPage.orders.slice(0, 2), null, 2));
                }
                
                if (orderPage.filteredOrders && orderPage.filteredOrders.length > 0) {
                    console.log('filteredOrders数组前两个元素:', JSON.stringify(orderPage.filteredOrders.slice(0, 2), null, 2));
                }
                
                // 检查当前激活标签
                console.log('当前激活标签:', orderPage.activeTab);
                
                // 检查订单状态分布
                if (orderPage.orders && orderPage.orders.length > 0) {
                    const statusStats = orderPage.orders.reduce((acc, order) => {
                        acc[order.status] = (acc[order.status] || 0) + 1;
                        return acc;
                    }, {});
                    console.log('订单状态分布:', statusStats);
                }
                
                logResult(`找到订单页面Vue实例。orders长度: ${orderPage.orders?.length || '未定义'}, filteredOrders长度: ${orderPage.filteredOrders?.length || '未定义'}, 当前标签: ${orderPage.activeTab || '未定义'}`);
            } else {
                console.log('未找到订单页面Vue实例');
                logResult('未找到订单页面Vue实例，请确保您已经打开了订单页面(http://localhost:5174/orders)');
            }
            
            console.log('===== 测试filteredOrders数据结束 =====');
        }
        
        // 测试数据绑定
        function testDataBinding() {
            console.log('===== 测试数据绑定开始 =====');
            
            // 尝试找到订单页面的Vue实例
            const orderPage = findOrderPageVueInstance();
            
            if (orderPage) {
                // 检查数据绑定的完整性
                console.log('数据绑定检查:');
                console.log('- orders是否为数组:', Array.isArray(orderPage.orders));
                console.log('- filteredOrders是否为计算属性:', typeof orderPage.filteredOrders === 'object');
                console.log('- activeTab是否正确设置:', orderPage.activeTab);
                
                // 手动触发数据更新
                if (orderPage.loadOrders && typeof orderPage.loadOrders === 'function') {
                    console.log('尝试手动触发loadOrders函数...');
                    // 注意：这里不会实际调用，只是检查函数是否存在
                }
                
                logResult(`数据绑定检查完成。orders是数组: ${Array.isArray(orderPage.orders)}, filteredOrders类型: ${typeof orderPage.filteredOrders}, activeTab: ${orderPage.activeTab}`);
            } else {
                logResult('未找到订单页面Vue实例，无法测试数据绑定');
            }
            
            console.log('===== 测试数据绑定结束 =====');
        }
        
        // 测试Vue模板渲染
        function testVueTemplateRendering() {
            console.log('===== 测试Vue模板渲染开始 =====');
            
            // 检查订单列表DOM元素
            const orderList = document.querySelector('.order-list');
            const emptyOrders = document.querySelector('.empty-orders');
            
            console.log('订单列表DOM元素:', orderList);
            console.log('空状态DOM元素:', emptyOrders);
            
            if (orderList) {
                console.log('订单列表可见:', !orderList.hidden && orderList.offsetParent !== null);
                console.log('订单列表子元素数量:', orderList.children.length);
            }
            
            if (emptyOrders) {
                console.log('空状态可见:', !emptyOrders.hidden && emptyOrders.offsetParent !== null);
            }
            
            // 检查调试信息是否可见
            const debugInfo = document.querySelector('.debug-info');
            if (debugInfo) {
                console.log('调试信息可见:', !debugInfo.hidden && debugInfo.offsetParent !== null);
                
                // 如果调试信息可见，尝试展开它
                const summary = debugInfo.querySelector('summary');
                if (summary) {
                    summary.click();
                }
            }
            
            logResult(`模板渲染检查完成。订单列表: ${orderList ? '存在' : '不存在'}, 空状态: ${emptyOrders ? '存在' : '不存在'}, 调试信息: ${debugInfo ? '存在' : '不存在'}`);
            
            console.log('===== 测试Vue模板渲染结束 =====');
        }
        
        // 检查Vue实例
        function inspectVueInstance() {
            console.log('===== 检查Vue实例开始 =====');
            
            // 打印出全局Vue对象（如果存在）
            console.log('全局Vue对象:', window.Vue);
            
            // 查找所有可能的Vue实例
            console.log('尝试查找所有Vue实例...');
            
            // 检查文档中所有可能的Vue挂载点
            const mountPoints = ['#app', '[data-v-app]', '.container.orders'];
            
            mountPoints.forEach(selector => {
                const element = document.querySelector(selector);
                if (element) {
                    console.log(`找到元素 ${selector}:`, element);
                    // 尝试检查元素是否有Vue实例相关属性
                    for (let prop in element) {
                        if (prop.startsWith('__vue') || prop.startsWith('_vnode')) {
                            console.log(`元素 ${selector} 有Vue相关属性:`, prop);
                        }
                    }
                }
            });
            
            logResult('Vue实例检查完成，请查看控制台输出获取详细信息');
            
            console.log('===== 检查Vue实例结束 =====');
        }
        
        // 尝试查找订单页面的Vue实例
        function findOrderPageVueInstance() {
            // 在实际环境中，这可能需要根据具体的Vue版本和实现方式进行调整
            // 这里提供一个简单的实现
            
            // 尝试查找订单页面的根元素
            const orderContainer = document.querySelector('.container.orders');
            if (!orderContainer) {
                console.log('未找到订单页面容器元素');
                return null;
            }
            
            console.log('找到订单页面容器元素:', orderContainer);
            
            // 检查是否存在Vue实例的特征
            for (let prop in orderContainer) {
                if (prop.startsWith('__vue') || prop.includes('vue')) {
                    console.log('找到Vue相关属性:', prop);
                    // 尝试返回Vue实例
                    return orderContainer[prop];
                }
            }
            
            // 尝试直接检查window对象
            if (window.$vm) {
                console.log('找到window.$vm:', window.$vm);
                return window.$vm;
            }
            
            if (window.app) {
                console.log('找到window.app:', window.app);
                return window.app;
            }
            
            console.log('未找到明显的Vue实例引用');
            return null;
        }
        
        // 页面加载时的提示
        window.onload = function() {
            console.log('浏览器控制台调试工具已加载');
            console.log('请按F12打开开发者工具，然后查看控制台输出');
            console.log('====================================');
        };
    </script>
</body>
</html>